<!-- 导航递归 -->
<template>
  <!-- 有子节点渲染这个 -->
  <el-sub-menu :index="menu.path" v-if="menu?.children">
    <template #title>
      <div>
        <span
          style="font-size: 20px"
          :class="'icon' + ' ' + 'iconfont' + ' ' + menu?.icon"
        ></span>
      </div>
      <span style="margin-left: 5px">{{ menu?.title }}</span>
    </template>
    <!-- 递归调用本身，该组件在index.ts中全局注册了 -->
    <SubAside v-for="item in menu.children" :key="item.path" :menu="item" />
    <!-- :index="item.path" -->
  </el-sub-menu>
  <!-- 没有子节点渲染这个 -->
  <el-menu-item v-if="!menu?.children && !menu?.hidden" :index="menu?.path">
    <div>
      <span
        style="font-size: 20px"
        :class="'icon' + ' ' + 'iconfont' + ' ' + menu?.icon"
      ></span>
    </div>
    <span slot="title" style="margin-left: 5px">{{ menu?.title }}</span>
  </el-menu-item>
</template>
 
<script lang="js" setup>
import SubAside from './SubAside.vue'
// 拿到父组件传入的值
const props = defineProps({
  menu: Object,
  index: String,
  isCollapse: Boolean,
  icon:String
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>